<template>
	<view class="content">
		<view class="">
			<view :style="{'top':0}" class="position-fixed  jianbian box_box" style="border-bottom: 2rpx solid #F8F8F8;width: 100%;z-index: 9;">
				<view :style="{'height': ($common.headHeight()) + 'px'}"></view>
				<view  class=" position-relative " style="height: 44px;width: 100%;">
					<view class="zuofu">
						<text :class="['iconfont icon-homeiconfanhui p-l15 p-r5 f-s18 f-w800 co_fff']" @click="fanhui"></text>
						<text :class="['iconfont icon-chahao p-l15 f-s18 f-w800 co_fff']" @click="fanhui"></text>
					</view>
					<view :class="['f-w800 f-s16 text-center co_fff']" style="line-height: 44px;">购物车</view>
				</view>
				<view class="d-flex  align-center justify-content-space-between p-l20 p-r20 p-b10 p-t5">
					<view class="f-s15 co_fff f-wbold">购物车</view>
					<view class="sousuo bg_fff border-r12 d-flex align-center">
						<input type="text" class="f-s12 m-l10 flex1 f-w500" style="color: #D9885E;" placeholder-style="color:#D9885E" placeholder="配送至:长沙市雨花区小哈佛美语幼稚园">
					</view>
					<view class="f-s13  f-wbold" @tap="isStatus = !isStatus" :class="isStatus?'co_000':'co_fff'">{{isStatus?'取消':'管理'}}</view>
				</view>
			</view>
			<view :style="{'height': ($common.headHeight() + 83) + 'px'}"></view>
			<view class="">
				<view class="bg_fff p-b15">
					<checkbox-group>
						<view class="d-flex align-center p-t15 m-l15" v-for="(item,i) in commodityList">
							<!-- <checkbox value="cb" :checked="item.checked" style="transform:scale(0.9);" /> -->
							<view class="iconfont f-s20" @tap="checkboxChange(i)" :class="item.checked?'icon-danxuankuang-xuanzhong co_64acff':'icon-danxuankuang'"></view>
							<view class="m-l10 d-flex align-items-start flex1 m-r10">
								<image src="../../static/logo.png" mode="" style="width: 144rpx;height: 144rpx;"></image>
								<view class="m-l12 flex1">
									<view class="f-s12 f-wbold webkit-line-clamp-1">可康COCON-优果多口味水果饮料(散批)</view>
									<view class="f-s10 co_999 m-t3">1包=1包=7.50元/包</view>
									<view class="m-t10 d-flex align-items-center justify-content-space-between">
										<view class="f-s12 f-wbold co_FA732F">¥7.50</view>
										<view class="d-flex align-center">
											<view class="yuanxing d-flex align-center justify-content-center" @tap="jianClick(i)"><view class="iconfont icon-jianhao f-wbold f-s14"></view></view>
											<view class="m-l10 m-r10 text-center" style="min-width: 40rpx;">{{item.number}}</view>
											<view class="yuanxing d-flex align-center justify-content-center" @tap="jiaClick(i)"><view class="iconfont icon-jiahao_o f-wbold f-s14"></view></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</view>
		
		<view class="b-liuhai" ><view style="height: 188rpx;"></view></view>
		<view style="position: fixed; bottom: 0;width: 100%;z-index: 9;" class="bg_fff">
			<view class="b-liuhai d-flex align-center p-b10 p-t10">
				<view class="d-flex align-center m-l15">
					<view class="iconfont f-s20 m-r10" @tap="checkboxClick" :class="allChecked?'icon-danxuankuang-xuanzhong co_64acff':'icon-danxuankuang'"></view>
					<view class="f-s14 f-wbold">全选</view>
				</view>
				<view class="flex1 m-l15">
					<view class="d-flex align-center" v-if="!isStatus">
						<view class="d-flex align-center  flex1 " :class="countNum > 0?'justify-content-space-between':'justify-content-end'">
							<view class="f-s10" v-if="countNum > 0">已选： <text class="co_FA732F">{{countNum}}件</text></view>
							<view class="f-s12">合计： <text class="co_FA732F f-wbold">￥1656.00</text></view>
						</view>
						<view class="jiesuan d-flex align-center justify-content-center co_fff f-s14 m-l10 m-r10">结算</view>
					</view>
					<view v-else class="d-flex align-center justify-content-end">
						<view class="jiesuan d-flex align-center justify-content-center co_fff f-s14 m-l10 m-r10">删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityList:[
					{number:1,checked:false},
					{number:1,checked:false},
					{number:1,checked:false},
					{number:1,checked:false},
				],
				isStatus:false,
				allChecked:false,
				countNum:0
			}
		},
		onLoad() {

		},
		methods: {
			fanhui() {
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				if(pages.length < 2){
					this.$common.redirectTo('/pages/home/home',true)
				}else{
					uni.navigateBack()
				}
			},
			// 减法
			jianClick(i) {
				if(this.commodityList[i].number > 1) {
					this.commodityList[i].number--
				}else {
					
				}
			},
			// 加法
			jiaClick(i) {
				this.commodityList[i].number++
			},
			// 单个商品选中
			checkboxChange(i) {
				this.commodityList[i].checked = !this.commodityList[i].checked
				var list = []
				this.commodityList.forEach(e => {
					if(e.checked) {
						list.push(e)
					}
				})
				if(list.length == this.commodityList.length) {
					this.allChecked = true
				}else {
					this.allChecked = false
				}
				this.countNum = list.length
			},
			// 全选
			checkboxClick() {
				this.$forceUpdate()
				this.allChecked = !this.allChecked
				this.commodityList.forEach(e => {
					if(this.allChecked) {
						e.checked = true
						this.countNum = this.commodityList.length
					}else {
						e.checked = false
						this.countNum = 0
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FAFAFA;
	}
</style>

<style lang="scss">
	.sousuo{
		width: 480rpx;
		height: 46rpx;
		line-height: 46rpx;
	}
	.jianbian{
		background-image: linear-gradient(#FA732F, #FBA558);
	}
	.zuofu{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	/deep/ uni-checkbox .uni-checkbox-input{
		border-radius: 50% !important;
	}
	.yuanxing{
		width: 50rpx;
		height: 50rpx;
		border: 2rpx solid #F1F1F1;
		border-radius: 50%;
	}
	.jiesuan{
		width: 140rpx;
		height: 66rpx;
		background: #FE6932;
		border-radius: 66rpx;
	}
</style>